import { useRef } from "react";
// import  {Funchild1}  from "./funchild/funchild";
import Funchild from "./funchild/funchild";
import MyInput from "./myInput/myInput";

import React, { useImperativeHandle, forwardRef } from "react";

function Child(props, ref) {
  console.log("child", props);
  // 此处注意useImperativeHandle方法的的第一个参数是目标元素的ref引用
  useImperativeHandle(ref, () => ({
    // changeVal 就是暴露给父组件的方法
    changeVal: (newVal) => {
      alert("调用了子组件的方法=>" + newVal);
    },
  }));

  return <div>我是child</div>;
}
let Child1 = forwardRef(Child);

//-------------------------------------
function Fun() {
  const childRef = useRef();
  const childRef1 = useRef();
  const myInput1 = React.createRef();
  //   父组件调用
  function updat() {
    childRef.current.changeVal("哈哈");
  }
  function updat1() {
    childRef1.current.changeVal("哈哈");
  }
  function updat2() {
    myInput1.current.changeVal("哈哈");
  }
  return (
    <div>
      我是函数组件
      <button onClick={updat}>父组件调用子组件Funchild</button>
      <Funchild ref={childRef} Funchild={"我是Funchild"}></Funchild>

      <button onClick={updat1}>父组件调用子组件child</button>
      <Child1 ref={childRef1} child={"child"}></Child1>
      <button onClick={updat2}>父组件调用子组件myInput1</button>
      <MyInput ref={myInput1}></MyInput>
    </div>
  );
}

export default Fun;
